
<template>
		<div ref="fullscreenElement">
			 <Modelheader @clearData="clearData" @autotypeDate="autotypeDate" :examStatus="examStatus"></Modelheader>
			 <div>
				 <div class="cropperBox">
					 <div class="cropperImageset"
					 	@mousedown ="startDrag"
					@mousemove ="onDrag"
					@mouseup ="stopDrag"
					@mouseleave ="stopDrag"
					:style="{
						cursor: isDragging ? 'grabbing !important' : 'grab !important',
					}"
					 >
						<ImageSelector ref="childComponent" 
:style="{
							transform: `translate(${offsetX}px, ${offsetY}px) scale(${scale/100})`,
						}"

						@newRectangle="newRectangle" 
						:drawStatus="drawStatus" 
						:pagevale="pagevale" 
						:imageUrllist="modelenews" 
						 @modeltype="modeltype" 

						@isDrawingChange="isDrawingChange"
						:scale="scale"
						:startX="startX"	
						:startY="startY"	
						:offsetX="offsetX"	
						:offsetY="offsetY"	
						:isDragging="isDragging"	

						 :modelarealistcavans="modelarealistcavans" @refreshdata="refreshdata" @editContent="editContent" @objbasicparameters="objbasicparameters" :canvasindex="canvasindex" :canbaspage="canbaspage" />
						 <!-- <ImageSelector ref="childComponent" :pagevale="pagevale" :imageUrllist="modelenews"  @modeltype="modeltype" :modelarealistcavans="modelarealistcavans" @refreshdata="refreshdata" @objbasicparameters="objbasicparameters" @newRectangle="newRectangle" /> -->
						<div class="templatePage1" style="width:350px">
							<!-- 进度条缩放 -->
							<el-slider
							v-model="scale"
							:min="1"
							:max="100"
							show-input style="width:100%">
							</el-slider>    
						</div>
						<div class="templatePage">
                            <div v-for="(item,index) in modelenews" :key="index" :class="pagevale-1==index?'hover imgbox':'imgbox'" @click="changeImage(index)">{{ index+1 }}</div>
                        </div>
						<div v-if="selectquestionitem" :style="{width:selectquestionitem.width+'px',height:selectquestionitem.height+'px',background:'rgba(255,0,0,0.4)',position:'absolute',left:selectquestionitem.x+'px',top:selectquestionitem.y+'px',zIndex:1000}"></div>
                    </div>
					 <div class="uploadcardInfo">
						 <el-collapse v-model="activeName" accordion>
                                <el-collapse-item name="1">
                                    <template #title>
                                        <div class="custom-title">
                                            <span style="margin-left: 10px;">定位标识*<i :class="{ 'hover': totalLocations === 8 }">({{parseInt(pageonelocation.length+pagetwolocation.length)==8?'已全部框选':'未完全框选'}})</i></span>
                                        </div>
                                    </template>
                                    <div class="locationmark">
                                        <b class="titlebnumber">第一页</b>
                                        <div class="nameexamnum">
                                            <ul class="nameexamnumul">
												<!-- :class="{ red: isFieldTypeActive(item.fieldType) }"  -->
												<li 
													v-for="(item,index) in menuItems" 
													:key="index"
													:class="{
														'red': !isFieldTypeActive(item.fieldType),
														'hover': activeindex === index
													}"
													@click="locationmark(item,item.fieldType, 1, item.label, index)"
												>
													{{ item.label }}
												</li>
                                            </ul>
                                            <!-- <i>编辑</i> -->
                                            <span @click="deleteZbinfo(1)" v-if="examStatus==0">删除</span>
                                        </div>
                                    </div>
                                    <div class="locationmark">
                                        <b class="titlebnumber">第二页</b>
                                        <div class="nameexamnum">
                                            <ul class="nameexamnumul">
												<li 
													v-for="(item,index) in menuItems1" 
													:key="index"
													:class="{
														'red': !isFieldTypeActive1(item.fieldType),
														'hover': activeindex1 === index
													}"
													@click="locationmark1(item,item.fieldType, 1, item.label, index)"
												>
													{{ item.label }}
												</li>
                                            </ul>
                                            <!-- <i>编辑</i> -->
                                            <span @click="deleteZbinfo(2)" v-if="examStatus==0">删除</span>
                                        </div>
                                    </div>
                                </el-collapse-item>
                                <el-collapse-item  name="2">
                                     <template #title>
                                        <div class="custom-title"  :class="{'custom-titleHover':sbshover==20}" @click="examnumberclick(20,1,'准考证号填涂')">
                                            <span style="margin-left: 10px;">准考证号填涂*<i :class="{ 'hover': totalLength === 100 }">({{ totalLength==100?'已框选':'未框选' }})</i></span>
                                        </div>
                                    </template>
                                    <div class="examnumbercontent">
                                        <b>第一位</b>
                                        <div class="nameexamnum">
                                            <ul class="examnumberset">
                                                <li v-for="(item,index) in 10"
													:key="index"
												:class="{
													'hover': isHovered(0,index),
													'red': examNumbers && examNumbers[0] && examNumbers[0].numbers[0] && examNumbers[0].numbers[0].some(num => parseInt(num.fieldName) === index)
													}"
												 @click="examnumberclick(5,1,index,0)">{{index}}</li>
                                            </ul>
                                            <!-- <i>编辑</i> -->
                                            <span @click="deleteExamnumber(examNumbers[0].numbers[0])" v-if="examStatus==0">删除</span>
                                        </div>
                                    </div>
                                    <div class="examnumbercontent">
                                        <b>第二位</b>
                                        <div class="nameexamnum">
                                            <ul class="examnumberset">
                                                <li v-for="(item,index) in 10" 
													:key="index"
												:class="{'hover': isHovered(1,index),'red': examNumbers && examNumbers[0] && examNumbers[0].numbers[1] && examNumbers[0].numbers[1].some(num => parseInt(num.fieldName) === index)}"
												@click="examnumberclick(5,1,index,1)">{{index}}</li>
                                            </ul>
                                            <!-- <i>编辑</i> -->
                                            <span @click="deleteExamnumber(examNumbers[0].numbers[1])" v-if="examStatus==0">删除</span>
                                        </div>
                                    </div>
                                    <div class="examnumbercontent">
                                        <b>第三位</b>
                                        <div class="nameexamnum">
                                            <ul class="examnumberset">
                                                <li v-for="(item,index) in 10" 
													:key="index"
												:class="{'hover': isHovered(2,index),'red': examNumbers && examNumbers[0] && examNumbers[0].numbers[2] && examNumbers[0].numbers[2].some(num => parseInt(num.fieldName) === index)}"
												@click="examnumberclick(5,1,index,2)">{{index}}</li>
                                            </ul>
                                            <!-- <i>编辑</i> -->
                                            <span @click="deleteExamnumber(examNumbers[0].numbers[2])" v-if="examStatus==0">删除</span>
                                        </div>
                                    </div>
                                    <div class="examnumbercontent">
                                        <b>第四位</b>
                                       <div class="nameexamnum">
                                            <ul class="examnumberset">
                                                <li v-for="(item,index) in 10"
													:key="index"
												:class="{'hover': isHovered(3,index),'red': examNumbers && examNumbers[0] && examNumbers[0].numbers[3] && examNumbers[0].numbers[3].some(num => parseInt(num.fieldName) === index)}"
												@click="examnumberclick(5,1,index,3)">{{index}}</li>
                                            </ul>
                                            <!-- <i>编辑</i> -->
                                            <span @click="deleteExamnumber(examNumbers[0].numbers[3])" v-if="examStatus==0">删除</span>
                                        </div>
                                    </div>
                                    <div class="examnumbercontent">
                                        <b>第五位</b>
                                        <div class="nameexamnum">
                                            <ul class="examnumberset">
                                                <li v-for="(item,index) in 10"
													:key="index"
												:class="{'hover': isHovered(4,index),'red': examNumbers && examNumbers[0] && examNumbers[0].numbers[4] && examNumbers[0].numbers[4].some(num => parseInt(num.fieldName) === index)}"
												@click="examnumberclick(5,1,index,4)">{{index}}</li>
                                            </ul>
                                            <!-- <i>编辑</i> -->
                                            <span @click="deleteExamnumber(examNumbers[0].numbers[4])" v-if="examStatus==0">删除</span>
                                        </div>
                                    </div>
                                    <div class="examnumbercontent">
                                        <b>第六位</b>
                                        <div class="nameexamnum">
                                            <ul class="examnumberset">
                                                <li v-for="(item,index) in 10"
													:key="index"
												:class="{'hover': isHovered(5,index),'red': examNumbers && examNumbers[0] && examNumbers[0].numbers[5] && examNumbers[0].numbers[5].some(num => parseInt(num.fieldName) === index)}"
												@click="examnumberclick(5,1,index,5)">{{index}}</li>
                                            </ul>
                                            <!-- <i>编辑</i> -->
                                            <span @click="deleteExamnumber(examNumbers[0].numbers[5])" v-if="examStatus==0">删除</span>
                                        </div>
                                    </div>
                                    <div class="examnumbercontent">
                                        <b>第七位</b>
                                        <div class="nameexamnum">
                                            <ul class="examnumberset">
                                                <li v-for="(item,index) in 10" 
													:key="index"
												:class="{'hover': isHovered(6,index),'red': examNumbers && examNumbers[0] && examNumbers[0].numbers[6] && examNumbers[0].numbers[6].some(num => parseInt(num.fieldName) === index)}"
												@click="examnumberclick(5,1,index,6)">{{index}}</li>
                                            </ul>
                                            <!-- <i>编辑</i> -->
                                            <span @click="deleteExamnumber(examNumbers[0].numbers[6])" v-if="examStatus==0">删除</span>
                                        </div>
                                    </div>
                                    <div class="examnumbercontent">
                                        <b>第八位</b>
                                        <div class="nameexamnum">
                                            <ul class="examnumberset">
                                                <li v-for="(item,index) in 10"
													:key="index"
												:class="{'hover': isHovered(7,index),'red': examNumbers && examNumbers[0] && examNumbers[0].numbers[7] && examNumbers[0].numbers[7].some(num => parseInt(num.fieldName) === index)}"
												@click="examnumberclick(5,1,index,7)">{{index}}</li>
                                            </ul>
                                            <!-- <i>编辑</i> -->
                                            <span @click="deleteExamnumber(examNumbers[0].numbers[7])" v-if="examStatus==0">删除</span>
                                        </div>
                                    </div>
                                    <div class="examnumbercontent">
                                        <b>第九位</b>
                                        <div class="nameexamnum">
                                            <ul class="examnumberset">
                                                <li v-for="(item,index) in 10"
													:key="index"
												:class="{'hover': isHovered(8,index),'red': examNumbers && examNumbers[0] && examNumbers[0].numbers[8] && examNumbers[0].numbers[8].some(num => parseInt(num.fieldName) === index)}"
												@click="examnumberclick(5,1,index,8)">{{index}}</li>
                                            </ul>
                                            <!-- <i>编辑</i> -->
                                            <span @click="deleteExamnumber(examNumbers[0].numbers[8])" v-if="examStatus==0">删除</span>
                                        </div>
                                    </div>
                                    <div class="examnumbercontent">
                                        <b>第十位</b>
                                        <div class="nameexamnum">
                                            <ul class="examnumberset">
                                                <li v-for="(item,index) in 10"
													:key="index"
												:class="{'hover': isHovered(9,index),'red': examNumbers && examNumbers[0] && examNumbers[0].numbers[9] && examNumbers[0].numbers[9].some(num => parseInt(num.fieldName) === index)}"
												@click="examnumberclick(5,1,index,9)">{{index}}</li>
                                            </ul>
                                            <!-- <i>编辑</i> -->
                                            <span @click="deleteExamnumber(examNumbers[0].numbers[9])" v-if="examStatus==0">删除</span>
                                        </div>
                                    </div>
                                </el-collapse-item>
                        </el-collapse>
                        <div class="custom-title1" :class="{'custom-titleHover':sbshover==4}" @click="examnumberclick(4,1,'条形码')">
                            <span style="margin-left: 10px;">条形码*<i :class="txmdata.length>0?'hover':''">({{txmdata.length>0?'已框选':'未框选'}})</i></span>
							<template  v-if="examStatus==0"><b @click.stop="modelDelete(4,txmdata[0].id)" v-if="txmdata.length>0">删除</b></template>
                        </div>
                        <div class="custom-title1" :class="{'custom-titleHover':sbshover==8}" @click="examnumberclick(8,1,'科目标识')">
                            <span style="margin-left: 10px;">科目标识*<i :class="sujectdata.length>0?'hover':''">({{sujectdata.length>0?'已框选':'未框选'}})</i></span>
							<template  v-if="examStatus==0"><b @click.stop="modelDelete(8,sujectdata[0].id)" v-if="sujectdata.length>0">删除</b></template>
                        </div>
                        <div class="custom-title1" :class="{'custom-titleHover':sbshover==3}" @click="examnumberclick(3,1,'缺考标识')">
                            <span style="margin-left: 10px;">缺考标识*<i :class="qkbjdata.length>0?'hover':''">({{qkbjdata.length>0?'已框选':'未框选'}})</i></span>
							<template  v-if="examStatus==0"><b @click.stop="modelDelete(3,qkbjdata[0].id)" v-if="qkbjdata.length">删除</b></template>
                        </div>
					 </div>
				 </div>
			 </div>
		</div>
</template>

<script>
import ImageSelector from '../../components/model/positioningarea.vue'  //切图
import Modelheader from '../../components/model/modelhead.vue'
import {templateIdinfo,basicinfoCanvasimg,gettemplateClitinfo,bascInfodelete} from '../../api/paperinfo/paperinfo.js'
export default {
  name: 'App',
  computed: {
	totalLocations() {
		return this.pageonelocation.length + this.pagetwolocation.length;
	},
	isselect(){
		return this.map
	},
	totalLength() {
		// 检查 examNumbers 是否存在且结构正确
		if (!this.examNumbers || !this.examNumbers[0] || !this.examNumbers[0].numbers) {
			return 0;
		}
		const numbersArray = this.examNumbers[0].numbers;
		// 使用 reduce 方法计算所有 numbers 的长度总和
		const sum = numbersArray.reduce((total, current) => {
			return total + (current ? current.length : 0);
		}, 0);                             
		return parseInt(sum, 10); // 确保返回的是整数
	}
  },
  data(){
	return{
		scale:100,
		isDragging: false,
		noFragging: false,
		startX: 0,
		startY: 0,
		offsetX: 0,
		offsetY: 0,
		isDrawing: false,


		navbar:[
			{
				name:'模板信息及上传',
				id:0,
			},
			{
				name:'水平定位',
				id:1,
			},
			{
				name:'定位区',
				id:2,
			},
			{
				name:'准考证号区',
				id:3,
			},
			{
				name:'客观题区',
				id:4,
			},
			{
				name:'主观题区',
				id:5,
			}
		],
		tabnavindex:0,
		examclassify:'',
		examclassifylist:['条形码','涂点','手写'],
		examNumber:'',
		examNumberlist:[4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],
		cardNumber:2,
		cardNumberlist:[2,4,6],
		cardColor:'',
		cardColorlist:['黑色','灰色','彩色'],
		examdpi:'',
		examdpilist:[150,200,300],
		images: [],
		questiontype:'',
		questionList:[
			{
				name:'定位点',
				id:1
			},
			{
				name:'文字定位',
				id:2
			}
		],
		
		selectradio:1,
		fillinWidth:0,
		fillinHeight:0,
		intervalWidth:0,
		intervalHeight:0,
		modelobj:{
		  id:0,
		  examId:0,
		  examCourseId:0,
		  examNoLength:4,
		  answerCardPages:2,
		  status:0,
		  templateImages: []
		},
		moduleImageurl:{},
		templateId:'',//模板id
		examCourseId:'',//考试科目id
		modeldata:{
			templateId: 0,
			examCourseId: 0,
			templateAreaType:1
		},
		positioningare:{
			id: 0,
			templateId: 0,
			templateAreaType: 0,
			templateCuttingRegion:[]
		},
		modeltypequestion:[],
		modelarealist:[],
		modelarealistcavans:[],
		examInfo:{},
		editmodelishow:false,
		pagevale:1,
		modelenews:[],
		examName:'',
		telemplatelist:[],
		isFullscreen: false, // 当前是否处于全屏状态
        activeName: '1',
		drawStatus:false,
		clitpage:0,
		clittype:0,
		clitname:0,
		menuItems: [
			{ fieldType: '1',  label: "第一页-1" },
			{ fieldType: '11', label: "第一页-2" },
			{ fieldType: '13', label: "第一页-3" },
			{ fieldType: '12', label: "第一页-4" }
		],
		menuItems1: [
			{ fieldType: '1',  label: "第二页-1" },
			{ fieldType: '11', label: "第二页-2" },
			{ fieldType: '13', label: "第二页-3" },
			{ fieldType: '12', label: "第二页-4" }
		],
		activeindex:-1,
		activeindex1:-1,
		pageonelocation:[],
		pagetwolocation:[],
		canvasindex:0,
		canbaspage:1,
		examnumberdata:[],
		txmdata:[],
		sujectdata:[],
		qkbjdata:[],
		examNumbers:[],
		selectquestionitem:{},
		hoveredIndex: null, // 当前悬停的 index
		hoverindexclas:null,
		sbshover:0,
		fileldType:'',
		examStatus:''
	}  
  },
  mounted() {
	  // 监听全屏状态变化
	//   document.onfullscreenchange = this.handleFullscreenChange;
	setTimeout(() => {
	    this.gettemplateinfo()
		this.modeltab()
	},1000)
  },
  methods:{
	deleteExamnumber(conarray){
		this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
			let ids = [conarray[this.hoverindexclas].id]
			bascInfodelete(ids).then(res=>{
			    this.hoverindexclas = null
				if(res.code == 200){
				    this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.gettemplateinfo()
				}
			})
			// if()
		}).catch(() => {
			this.$message
		})
	},
	modelDelete(num,id){
		this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
			let ids = [id]
			bascInfodelete(ids).then(res=>{
			    console.info('res0',res)
				if(res.code == 200){
				    this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.gettemplateinfo()
				}
			})
			// if()
		}).catch(() => {
			this.$message
		})
	},
	deleteZbinfo(num){
		this.$confirm('此操作将永久删除该模板, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
			let list= []
			if(num==1){
				list = this.pageonelocation.filter(item=>item.fieldType==this.fileldType)
				console.info('this.pageonelocation',list)
			}else{
				list = this.pagetwolocation.filter(item=>item.fieldType==this.fileldType)
			}
			let id = list[0].id
			let ids = [id]
			bascInfodelete(ids).then(res=>{
				if(res.code == 200){
				    this.$message({
						type: 'success',
						message: '删除成功!'
					});
					this.gettemplateinfo()
					this.activeindex1 = -1
					this.activeindex = -1
				}
			})
			// if()
		}).catch(() => {
			this.$message
		})
	},
	isHovered(num,index) {
		this.isHoveredhover = index
		return this.hoveredIndex === index&&this.hoverindexclas === num;
	},
	isFieldTypeActive(fieldType) {
		return this.pageonelocation.some(item => item.fieldType == fieldType);
	},
	isFieldTypeActive1(fieldType) {
		return this.pagetwolocation.some(item => item.fieldType == fieldType);
	},
	autotypeDate(){
		this.gettemplateinfo()
	},
	//获取模板切图信息
	gettemplateinfo(){
		this.modelarealistcavans = []
		let obj={
			templateId:this.$route.query.templateId,
		}
		gettemplateClitinfo(obj).then(res=>{
		   if(res.code==200){
			   if (res.data) {
					this.examNumbers = res.data&&res.data.length>0?res.data.filter(item => item.fieldType == 20):[]
					console.info(this.examNumbers,'fieldType')
					const transformData = (data) => {
						return data.map(item => {
							// Create a shallow copy of the item
							const newItem = {...item};
							
							// If numbers exists, process it
							if (Array.isArray(item.numbers)) {
							// Flatten the nested arrays into a single array
							newItem.options = item.numbers.flat();
							delete newItem.numbers; // Remove the numbers property
							}
							
							return newItem;
						});
					};
					//条形码
					this.txmdata = res.data.filter(item => item.fieldType == 4);
					//缺考标记
					this.qkbjdata = res.data.filter(item => item.fieldType == 3);
					//科目
					this.sujectdata = res.data.filter(item => item.fieldType == 8);
					//获取准考证号
					this.examnumberdata = res.data.filter(item => item.fieldType == 20);
					console.info('this.examnumberdata',this.examnumberdata)
					//坐标点第一二页
					this.pageonelocation = res.data.filter(item => 
						item.page == 1 && 
						(item.fieldType == 1 || item.fieldType == 11 || item.fieldType == 12 || item.fieldType == 13)
					);
					console.info(this.pageonelocation,'this.pageonelocation')
					this.pagetwolocation = res.data.filter(item => 
						item.page == 2 && 
						(item.fieldType == 1 || item.fieldType == 11 || item.fieldType == 12 || item.fieldType == 13)
					);
					console.info(this.pagetwolocation,'this.pagetwolocation')
					//回显坐标
					let objlist = res.data
					.filter(item => item.page == this.pagevale)
					.map(item => ({
						...item,
						templatePointType:item.fieldType == 1?'第一页-1':item.fieldType == 11?'第一页-2':item.fieldType == 13?'第一页-3':item.fieldType == 12?'第一页-4':item.fieldType == 8?'科目':item.fieldType == 4?'条形码':item.fieldType == 20?'准考证号填涂':item.fieldName,
					}));
					console.info('objlist',transformData(objlist))
					this.modelarealistcavans = transformData(objlist);
				}else{
					this.modelarealistcavans=[]
				}
		   }
		})
	},
	locationmark(con,xh,page,name,index){
		this.fileldType = con.fieldType
		this.canvasindex = xh
		this.canbaspage = page
		if (this.drawStatus && this.activeindex === index) {
			this.activeindex = null
			if(this.isFieldTypeActive(xh)){
				this.drawStatus = false
			} else {
				this.drawStatus = true
			}
		} else {
			this.clitpage = page
			this.clittype = xh
			this.clitname = name
			this.activeindex = index
			if(this.isFieldTypeActive(xh)){
				this.drawStatus = false
			} else {
				this.drawStatus = true
			}
		}
		console.info('drawStatus',this.drawStatus)
	},
	locationmark1(con,xh,page,name,index){
		this.fileldType = con.fieldType
		this.canvasindex = xh
		this.canbaspage = page
		if (this.drawStatus && this.activeindex === index) {
			if(this.isFieldTypeActive1(xh)){
				this.drawStatus = true
			} else {
				this.drawStatus = true
			}
			this.activeindex1 = null
		} else {
			this.drawStatus = true
			if(this.isFieldTypeActive1(xh)){
				this.drawStatus = true
			} else {
				this.drawStatus = true
			}
			this.clitpage = page
			this.clittype = xh
			this.clitname = name
			this.activeindex1 = index
		}
	},
	examqxlist(xh,page,name){
		this.drawStatus = true
		this.clitpage = page
		this.clittype = xh
		this.clitname = name
	},
	examnumberclick(xh,page,name,num){
		this.sbshover = xh
		this.hoveredIndex = name
		this.hoverindexclas = num
	   this.drawStatus = true
		this.clitpage = page
		this.clittype = xh
		this.clitname = name 
		
	},
	//切图坐标点
	newRectangle(val) {
		console.info('val',val)
		let option={
			templateId:this.$route.query.templateId,
			page:this.pagevale,
			fieldType:this.clittype,
			fieldName:this.clitname,
			x:val.x,
			y:val.y,
			width:val.width,
			height:val.height,
			sort: 0
		}
		// console.info(option)
		basicinfoCanvasimg(option).then(res=>{
			console.info(res)
			if(res.code==200){
				this.gettemplateinfo()
				this.drawStatus = false
			}else{
				this.$message.error(res.msg); 
			}
		})
	},
    changeImage(index){
        this.pagevale = index+1
		this.gettemplateinfo()
    },
    // 获取模板
	modeltab(){
        let obj={
            templateId:this.$route.query.templateId,
        }
        templateIdinfo(obj).then(res=>{
            console.info(res)
            if(res.code==200){
                this.modelenews = res.data
				this.examStatus = res.data&&res.data[0].editStatus
            }
        })
	},
	  quiteclick(){
		  this.$router.push('/examoverview')
	  },
	  editContent(data){
		  this.editmodelishow = data.ishow
		  this.questiontype= data.templatePointType
		  this.positioningare.templateCuttingRegion = [{
		  		id: data.id,
		  		templateId:this.$route.query.templateId, // 如果有具体的 templateId 值，可以在这里赋值
		  		templatePointType:this.qiehuanzhiquestiontype, // 如果有具体的 templatePointType 值，可以在这里赋值
		  		page:this.pagevale,
		  		width: data.w,
		  		height: data.h,
		  		x: data.x,
		  		y: data.y
		  }]
	  },
	  questionchange(data){
		  // this.qiehuanzhiquestiontype = data
		  this.positioningare.templateCuttingRegion[0].templatePointType = data
	  },
	  canceleditbox(){
	  		    this.editishow=false
	  			this.editmodelishow = false
	  },
	  objbasicparameters(){
		  this.editishow=false
		  this.editmodelishow = false
	  },
	  refreshdata(){
	  		this.modeltab()
	  },
	  modeltype(data){
		  this.modeltypequestion.push(data)
	  },
	pagevalueindex(val){
		this.pagevale = val
		this.modelinfo(this.templateId)
	},
	// 切换全屏
	toggleFullscreen() {
	  if (!document.fullscreenEnabled) {
	    alert("您的浏览器不支持全屏功能！");
	    return;
	  }
	
	  if (this.isFullscreen) {
	    // 退出全屏
	    document.exitFullscreen();
		this.$refs.fullscreenElement.style.overflow = 'auto';
	  } else {
	    // 进入全屏
	    this.$refs.fullscreenElement.requestFullscreen();
		this.$refs.fullscreenElement.style.overflow = 'auto';
	  }
	},
	// 处理全屏状态变化
	handleFullscreenChange() {
	  this.isFullscreen = !!document.fullscreenElement;
	},
	clearData(){
		this.gettemplateinfo()
	},

	// 拖拽
	 startDrag(e) {
		if (!this.noFragging && !this.isDrawing) {
		this.isDragging = true
		this.startX = e.clientX - this.offsetX
		this.startY = e.clientY - this.offsetY
		}
	},
	onDrag(e) {
		if (!this.noFragging && !this.isDrawing) {
		if (!this.isDragging) return
		this.offsetX = e.clientX - this.startX
		this.offsetY = e.clientY - this.startY
		}
	},
	stopDrag() {
		if (!this.noFragging && !this.isDrawing) {
		this.isDragging = false
		}
	},
	isDrawingChange(e){
		console.log(e,'修改了isDrawing');
		
		this.isDrawing = e
	},
  },
  components: {
    ImageSelector,Modelheader
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
.header{
	padding:0 40px;
	height:48px;
	padding:0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	background:#2379F6;
	font-size:16px;
}
.header h3{
	font-weight: normal;
	font-size:16px;
}
.header p{
	display: flex;
}
.header p b{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 134px;
	height: 32px;
	background: rgba(255,255,255,0.1);
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	text-align: center;
	line-height:32px;
	cursor: pointer;
	margin-right:14px;
}
.header p b img{
	width:16px;
	margin-right:8px;
}
.header p em{
	display: inline-block;
	width: 76px;
	height: 32px;
	background: #FFFFFF;
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	color:#2379F6;
	text-align: center;
	line-height:32px;
	cursor:pointer
}
.tabNav{
	padding:0 40px;
	height:54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 24px 0 10px;
	background:#fff;
}
.tabNav ul{
	display: flex;
	align-items: center;
	font-size:14px;
}
.tabNav ul li{
	padding:0 20px;
	cursor: pointer;
	line-height:38px;
	color:#557292;
	position:relative
}
.tabNav ul li:hover,.tabNav ul li.hover{
	color:#2A303B;
}
.tabNav ul li:hover::after,.tabNav ul li.hover::after{
	content:'';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:0
}
.tabNav span{
	display: inline-block;
	width: 140px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	font-weight: 500;
	font-size: 14px;
	color: #295CFF;
	text-align: center;
	line-height:34px;
	cursor: pointer;
}
/* 上传 */
.uploadMarks{
	box-sizing: border-box;
	background:#F4F7FD;
	width:100vw;
	height:calc(100vh - 102px);
	position: relative;
}
.smcsbutton{
	width: 124px;
	height: 34px;
	background: #2379F6;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	border:none;
	/* margin:24px 0 0 24px; */
	position: absolute;
	padding:0;
	left:24px;
	top:24px;
}
.boxcenter{
	display: flex;
	justify-content: space-between;
}
.uploadcardInfo{
    width:480px;
	height:calc(100vh - 102px);
	background:#fff;
	position:relative;
    box-shadow: 0 4px 16px 0 #5572921a;
    overflow-y: auto;
}
.examboxbutton{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
}
.examboxbutton >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.examboxbutton1{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
	justify-content: center;
}
.examboxbutton1 >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton1 >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton1 >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.uploadcardInfo h3{
	line-height:67px;
	border-bottom:solid 1px #D8E4F0;
	padding:0 24px;
	color:#2A303B;
	font-weight:normal
}
.uploadCardimage{
	width:calc(100% - 460px);
	height:calc(100vh - 102px);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position:relative;
}
.uploadCardimage span{
	display: block;
	width:100%;
	text-align: center;
}
.uploaddiv{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.uploaddivattention{
	font-size: 14px;
	color: #B3B8C2;
}
.cropperBox{
	height:calc(100vh - 102px);
	display: flex;
}
.cropperImageset{
	width:calc(100% - 480px);
	height:calc(100vh - 102px);
	overflow:scroll;
	position: relative
}
/* 纵向滚动条宽度 */
/* 纵向滚动条宽度 */
.cropperImageset::-webkit-scrollbar {
  width: 12px; /* 控制纵向滚动条的宽度 */
  height: 12px; /* 控制横向滚动条的高度 */
}

/* 横向滚动条高度 */
.cropperImageset::-webkit-scrollbar-thumb {
  height: 8px; /* 单独调整横向滚动条滑块高度 */
}

/* 滚动条轨道 */
.cropperImageset::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* 滚动条滑块 */
.cropperImageset::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 6px;
}

/* 鼠标悬停时滑块样式 */
.cropperImageset::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}
.routate{
  	position:absolute;
  	left:50px;
  	top:5px;
  	background:#fff;
  	height:60px;
  	display: flex;
  	align-items: center;
  	padding:0 10px 0 0;
  	box-shadow: 0 0 5px rgba(0,0,0,0.1);
  	border-radius:5px;
  	font-size:14px;
  	color:#557292;
  	border-radius: 10px;
	z-index:10
  }
 .routate >>> .el-select,.routate >>>.el-input{
  	width:150px;
  }
 .routate >>> .el-select{
  	margin-right:10px;
  }
  .routate >>>.el-input{
  	margin-left:10px;
  	margin-right:10px;
  }
 .routate >>> .el-button{
  	border-radius:10px;
  	height:35px;
  	width:55px;
  	padding:0 ;
	margin-left:10px
  }
  .routate >>> .el-input__inner{
  	border-radius:10px;
  	height:35px;
  }
  .image-preview img{
	  box-sizing: border-box;
	  width: 150px;
	  height: 150px;
	  background: #FFFFFF;
	  border-radius: 10px;
	  text-align: center;
	  font-size:16px;
	  color:#295CFF;
	  cursor: pointer;
	  margin:22px;
  }
  .searchlist{
  	box-sizing: border-box;
  	width:auto;
  	display: flex;
  	justify-content: space-between;
  	height: 54px;
  	background: #FFFFFF;
  	border-radius: 10px;
  	padding:0;
  	align-items: center;
  }
  .searchlist{
  	display: flex;
  	align-items: center;
  	justify-content: left;
  }
  .searchlist a{
  	display: block;
  	color:#557292;
  	font-size:14px;
  	/* width:100px; */
  	text-align: center;
  	position: relative;
  	line-height:52px;
  	padding:0 15px;	
  }
  .searchlist a:hover,.searchlist a.hover{
  	color:#295CFF;
  }
  .searchlist a:hover::after,.searchlist a.hover::after{
  	content:'';
  	width: 24px;
  	height: 4px;
  	background: #295CFF;
  	border-radius: 2px;
  	position: absolute;
  	left:50%;
  	transform: translateX(-50%);
  	bottom:0;
  }
  .boxsetetid{
	  display: flex;
	  align-items: center;
  }
  .boxsetetid >>> .el-input__inner{
	  width:90px;
	  height:34px;
	  border-radius: 10px;
	  border: 1px solid #295CFF;
	  font-weight: 500;
	  font-size: 14px;
	  color: #295CFF;
  }
  .boxsetetid >>> .el-select .el-input .el-select__caret{
	  color: #295CFF
  }
  .boxsetetid >>> .el-input__icon{
	  line-height:34px;
  }
  .boxsetetid >>> .el-button{
	  padding:0;
	  width: 96px;
	  height: 34px;
	  background: #295CFF;
	  border-radius: 10px;
	  color:#fff;
	  line-height:34px;
	  margin:0 10px;
  }
  .breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
  	font-weight:normal
  }
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  	font-weight:bold
  }
  .examnumberset{
    display: flex;
    align-items: center;
    padding:0 0 0 10px;
  }
  .examnumberset li{
    width: 20px;
    height: 20px;
    border-radius: 2px;
    text-align: center;
    line-height:20px;
    margin-right:10px;
    cursor: pointer;
	border:solid 1px #EC555A;
    color:#EC555A;
  }
  .examnumberset li.red{
    border: 1px solid #295CFF;
	color:#1A48DB;
  }
  .examnumberset li.hover{
	background:#295CFF;
	color:#fff;
	border: 1px solid #295CFF;
  }
  .examnumbercontent b{
    display: block;
    padding:0 10px;
    font-size:14px;
    color:#5B6371;
    font-weight: normal;
  }
  .examnumbercontent:hover,.examnumbercontent.hover{
    background:#E8F0FA;
  }
  .nameexamnum{
    display: flex;
    align-items: center;
  }
  .nameexamnum i{
    display: inline-block;
    width: 44px;
    height: 20px;
    background: #1A48DB;
    border-radius: 2px;
    line-height:20px;
    text-align: center;
    line-height:20px;
    font-size:12px;
    color:#fff;
    font-style:normal;
    cursor: pointer;
  }
  .nameexamnum span{
    display: inline-block;
    width: 44px;
    height: 20px;
    background: #EC555A;
    border-radius: 2px;
    line-height:20px;
    text-align: center;
    line-height:20px;
    font-size:12px;
    color:#fff;
    font-style:normal;
    margin-left:10px;
    cursor: pointer;
  }
  .nameexamnumul{
    display: flex;
    align-items: center;
    padding:0 0 0 10px;
    height:20px;
  }
  .titlebnumber{
    display: block;
    font-style:normal;
    font-size:14px;
    color:#5B6371;
    padding:0 0 0 10px;
    font-weight: normal;
  }
  .locationmark{
    padding-top:15px;
    cursor: pointer;
  }
  .locationmark:hover,.locationmark.hover{
    background:#E8F0FA;
  }
  .nameexamnumul li{
    width: 64px;
    height: 20px;
    border: 1px solid #1A48DB;
    border-radius: 2px;
    font-size:12px;
    color:#1A48DB;
    line-height:20px;
    text-align: center;
    margin-right:10px;
  }
  .nameexamnumul li.red{
       border:solid 1px #EC555A;
       color:#EC555A;
   }
   .nameexamnumul li.hover, .nameexamnumul li:hover{
       background:#1A48DB;
	   border:solid 1px #1A48DB;
       color:#fff;
   }
   
  >>> .el-collapse-item__header{
    background:#E8F0FA
  }
  .custom-title1{
    width:100%;
    border-bottom:solid 1px #5572921a;
    padding:15px 0;
    cursor: pointer;
	display: flex;
	justify-content:space-between;
  }
  .custom-title1 span,.custom-title span{
    font-size:16px;
    color:#2A303B;
  }
  .custom-title1 span.hover,.custom-title span.hover{
    color:#1A48DB
  }
   .custom-title1 span i,.custom-title span i{
    font-style:normal;
    color:#EC555A
   }
   .custom-title1 span i.hover,.custom-title span i.hover{
	color:#27B787
   }
   .custom-title1:hover{
		background:#E8F0FA;
   }
   .custom-title:hover{
		background:#E8F0FA;
   }
   .custom-title{
		width:100%;
   }
   .custom-title1 b{
	display: inline-block;
	width: 44px;
    height: 20px;
    background: #EC555A;
    border-radius: 2px;
    line-height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    font-style: normal;
	margin-right:10px;
   }
   .custom-titleHover{
		background:#E8F0FA;
   }
   .templatePage{
    position:fixed;
    left:24px;
    bottom:24px;
    z-index:10;
    display: flex;
    align-items: center;
  }
   .templatePage1{
	 position:fixed;
    right:500px;
    bottom:24px;
    z-index:10;
    display: flex;
    align-items: center;
  }
  .imgbox{
    width: 32px;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #DEE1E7;
    border-radius: 2px;
    text-align: center;
    line-height:32px;
    font-size:14px;
    color:#557292;
    margin-right:14px;
    cursor: pointer;
  }
  .imgbox:hover,.imgbox.hover{
    background: #1A48DB;
    border-radius: 2px;
    color:#fff;
  }
</style>